<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="注册时间">
        <el-date-picker
            v-model="formInline.date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间">
        </el-date-picker>
        -
        <el-date-picker
            v-model="formInline.date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-radio-group v-model="formInline.userType">
          <el-radio :label="1">乘客</el-radio>
          <el-radio :label="2">司机</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage111">重置</el-button>
        <el-button type="primary" @click="findPage">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="Echarts">
      <div id="main" style="width: 100%;height:500px;"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      countList: [],
      formInline: {},
      tableData: [],
      data1: [],
    }
  },
  name: 'Echarts',
  methods: {
    findPage111() {
      this.formInline = {};
    },
    findPage() {
      this.findCount();
      this.findCount1();
      setTimeout(() => {
        this.myEcharts();
      }, 500);
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false }, // 数据视图，显示数据详情，可编辑
            // magicType: { show: true, type: ['line', 'bar'] }, // 动态类型切换，支持折线图和柱状图切换
            // restore: { show: true }, // 还原按钮，恢复图表到初始状态
            saveAsImage: {show: true} // 保存为图片按钮，将图表保存为图片文件
          }
        },
        legend: {
          data: ['注册人数', 'Precipitation', '趋势']
        },
        xAxis: [
          {
            type: 'category',
            data: this.data2,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation',
            // min: 0,
            // max: 50,
            // interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            // name: 'Precipitation',
            // min: 0,
            // max: 50,
            // interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '注册人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.data1
          },
          {
            name: '趋势',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: this.data1
          },
        ]
      };
      window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    findCount() {
      axios.post(`http://localhost:9999/api-function/driver/findCount`, this.formInline).then(res => {
        this.data1 = res.data.data;
        console.log(this.data1);
        console.log(11111111111111111111111111111111111111111111);
      })
    },
    findCount1() {
      axios.post(`http://localhost:9999/api-function/driver/findCount1`, this.formInline).then(res => {
        this.data2 = res.data.data;
        console.log(this.data2);
        console.log(22222222222222222222);
      })
    },
  },
  mounted() {
    this.findCount()
    this.findCount1()
    setTimeout(() => {
      this.myEcharts();
    }, 500);
  }
}
</script>

<style scoped>
</style>
